昨天的文章介紹了在 JSX 上面使用參數，而我們也可以在我們客制化的 Component 傳入參數或數值使用。而這些傳遞的東西在 React 就會叫做 props。今天就會來介紹要如何使用它們在 Components 之間做資料的傳遞。
今天的內容會參考官方文件的：

• https://zh-hant.react.dev/learn/passing-props-to-a-component

傳遞 Prop 步驟

傳入 props 到 child component
首先第一件事要做的，跟我們傳數值給其他 JSX tag 一樣，可以使用 大括號 來包涵我們要傳遞的數值：

function PlayerInfo() {
  return (
    <div>
      <Player name="LiHsuan" jerseyNumber={48} />
    </div>
  )
}

這樣就能把 名字 name 跟 背號 jerseyNumber 當作 props 傳進 Component <Player /> 裡面。

在 child component 裡面讀取傳入的 props
接下來，我們就要在 <Player /> 這個 component 裡面讀取剛剛傳入的 props，會有兩種寫法：

1. 使用 解構（destructuring）

function Player({ name, jerseyNumber }) {
  return (
    <div>
      <p>{name}</p>
      <p>{jerseyNumber}</p>
    </div>
  )
}

2. 直接使用 props object

function Player(props) {
  return (
    <div>
      <p>{props.name}</p>
      <p>{propsjerseyNumber}</p>
    </div>
  )
}

當我們以之前的方式給 component 寫入 props 的時候，React 會自動幫我們整理成 props 的 object 所以可以直接使用。
我自己是都比較習慣使用第一種寫法，只不過要記得在解構的時候要把大括號寫出來。

小結

今天因為時間問題先簡單介紹一下，明天會繼續這個主題，實在抱歉。如果有任何問題與建議歡迎告訴我，我們明天見了，晚安。